<template>
  <div>
    <div class="ibox-content no-border">
      <div style="font-weight: bold">添加APP产品</div>
    </div>
    <div class="ibox-content">
      <el-button size="small" type="primary" plain icon="el-icon-folder" @click.native="addProductClick('addForm')">添加
      </el-button>
      <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
    </div>
    <div class="ibox-content">
      <el-form ref="addForm" :model="editForm" :rules="editFormRules" class="elForm" size="small">
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_icon" label="Banner图">
              <br>
              <el-upload
                class="avatar-uploader"
                :action="upLoadUrl"
                :show-file-list="false"
                name="app_icon_file"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="editForm.app_icon_image.src" :src="editForm.app_icon_image.src" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_tags" label="页面">
              <el-select style="width: 100%" multiple v-model="editForm.app_tags" placeholder="请选择">
                <el-option :label="item.text" :value="parseInt(item.val)" :key="index"
                           v-for="(item,key,index) in tagOptions"></el-option>
              </el-select>
              <br>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_tags" label="位置">
              <el-select style="width: 100%" multiple v-model="editForm.app_tags" placeholder="请选择">
                <el-option :label="item.text" :value="parseInt(item.val)" :key="index"
                           v-for="(item,key,index) in tagOptions"></el-option>
              </el-select>
              <br>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_tags" label="指向">
              <el-select style="width: 100%" multiple v-model="editForm.app_tags" placeholder="请选择">
                <el-option :label="item.text" :value="parseInt(item.val)" :key="index"
                           v-for="(item,key,index) in tagOptions"></el-option>
              </el-select>
              <br>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_tags" label="产品">
              <el-input></el-input><el-button>选择产品</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_threshold_low" label="开始时间">
              <br>
              <el-date-picker style="width: 100%"
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_lending_fast" label="结束时间">
              <br>
              <el-date-picker style="width: 100%"
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_threshold_low" label="排序">
             <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_lending_fast" label="状态">
              <br>
              <el-radio-group v-model="editForm.is_lending_fast">
                <el-radio :label="key" :value="key" :key="index"
                          v-for="(item,key,index) in appProductOptions.lending_fast">{{item}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

      <div class="ibox-content">
        <el-button size="small" type="primary" plain icon="el-icon-folder" @click.native="addProductClick('addForm')">
          添加
        </el-button>
        <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
      </div>

    </div>


  </div>
</template>

<script>
  import {appProductOptions, getTagOptionsList, saveTag, uplaodUrl, addAppProduct} from "../../api/product";

  let imgUrl = process.env.VUE_APP_IMG_URL;
  export default {
    name: "AddBanner",
    data() {
      return {
        appName: '',
        appId: '',
        editForm: {
          is_pre_reg: '',
          is_reduce_interest: 0,
          is_exp_vip: 0,
          is_threshold_low: 0,
          is_lending_fast: 0,
          app_icon_image: {
            src: ''
          }
        },
        appProductOptions: {},
        tagOptions: [],
        addTagForm: {},
        addTagFormVisible: false,
        editFormRules: {
          app_type: [
            {required: true, message: '不能为空'}
          ],
          app_name: [
            {required: true, message: '不能为空',}
          ],
          app_pinyin_name: [
            {required: true, message: '不能为空',}
          ],
          is_pre_reg: [
            {required: true, message: '不能为空',}
          ],
          app_link: [
            {required: true, message: '不能为空',}
          ],
          final_type: [
            {required: true, message: '不能为空',}
          ],
          settlement_price: [
            {required: true, message: '不能为空',}
          ],
          is_threshold_low: [{required: true, message: '不能为空',}],
          is_lending_fast: [{required: true, message: '不能为空',}],
          loan_rate: [{required: true, message: '不能为空',}],
          min_loan_rate: [{required: true, message: '不能为空',}],
          max_loan_rate: [{required: true, message: '不能为空',}],
          min_loan_amount: [{required: true, message: '不能为空',}],
          max_loan_amount: [{required: true, message: '不能为空',}],
          min_loan_day: [{required: true, message: '不能为空',}],
          max_loan_day: [{required: true, message: '不能为空',}],
          app_tags: [{required: true, message: '请选择', trigger: 'blur'}],
          apply_condition: [{required: true, message: '不能为空',}],
          third_channel: [{required: true, message: '不能为空'}],
          third_reg_url: [{required: true, message: '不能为空'}],
          third_app_download: [{required: true, message: '不能为空'}],
          is_reduce_interest: [{required: true, message: '不能为空'}],
          is_exp_vip: [{required: true, message: '不能为空'}],
        },
        addTagFormRule: {
          tag: [
            {required: true, message: '请输入标签名称'}
          ],
        },
        upLoadUrl: uplaodUrl
      }
    },
    created() {
      this.appId = this.$route.params.appid ? this.$route.params.appid : '';
      this.appName = this.$route.params.name;
      console.log(this.$route.params)
    },
    mounted() {
      this.getAppProductOptions();
      this.getTagOptionsList();
    },
    methods: {

      addProductClick(form) {
        this.$refs[form].validate((valide) => {
          if (valide) {
            addAppProduct({
              ...this.editForm
            }).then(res => {
              this.$message.success(res.msg);
              setTimeout(() => {
                this.$router.back();
              }, 1000)
            }).catch(() => {

            })
          }
        })
      },

      //上传图片成功的钩子
      handleAvatarSuccess(data) {
        console.log(data.data);
        this.editForm.app_icon_code = data.data.data_code;
        this.editForm.app_icon_image.src = imgUrl + data.data.file;
        console.log(this.editForm.app_icon_image.src);
        this.editForm.app_icon_image.name = '';
        this.editForm.app_icon_image.picture_size = ''
      },
      beforeAvatarUpload() {
      },
      getAppProductOptions() {
        appProductOptions({}).then(res => {
          this.appProductOptions = res.data;
        }).catch(() => {

        })
      },
      getTagOptionsList() {
        getTagOptionsList({}).then(res => {
          this.tagOptions = res.data;
        }).catch(() => {

        })
      },
      closeDialog() {
        this.addTagFormVisible = false;
        this.$refs['addTagForm'].clearValidate();
      },
      addTagFormSave(form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            saveTag({
              ...this.addTagForm
            }).then(res => {
              this.addTagFormVisible = false;
              this.getTagOptionsList();
              this.$message.success(res.msg);
            }).catch(() => {
            })
          }
        })
      },
      goBack() {
        this.$confirm('确定要放弃添加App产品吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$router.push({name: 'AppProduct'})
        }).catch(() => {

        })
      }
    }
  }
</script>

<style>
  .avatar-uploader {
    height: 70px;
    margin-bottom: 10px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }


  i.avatar-uploader-icon::after {
    position: absolute;
    width: 100%;
    height: 18px;
    line-height: 18px;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: #fff;
    content: '上传图标';
    background: rgba(0, 0, 0, .2);
  }

  .avatar-uploader-icon {
    position: relative;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 68px;
    line-height: 68px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 68px;
    display: block;
  }
</style>

<style scoped lang="scss">
  .elForm {
    .elCol {
      &:nth-child(2n-1) {
        padding-right: 20px;
      }

      &:nth-child(2n) {
        padding-left: 20px;
      }
    }
  }
</style>
